<template>
	<view class="container">
		
		<!-- 顶部导航 -->
		<view class="fixHeader flex-y-center" :style="{paddingTop: StatusBar+'px'}">
		  <view class="leftbtn" @click="goBack()">
		    <image :src="$util.img('/image/header_left.png')" mode="widthFix" style="width: 60rpx;"></image>
		  </view>
		</view>
		<!-- 图片轮播——带右下角数量显示 -->
		<view class="advertisement m-b-30">
		  <swiper :autoplay="false" :interval="3000" :duration="1000" :circular="true" indicator-active-color="#00D075" indicator-color="#EDEEF0" :indicator-dots="true">
		    <swiper-item v-for="(item,index) in piclist" :key="index" @click="previewMedia(index)">
		      <image :src="$util.img(item)" mode="aspectFill" lazy-load></image>
		    </swiper-item>
		  </swiper>
		</view>
		
		<view class="boxPanel rel" style="margin-top: -82rpx;">
			<view class="flex-between">
				<view class="font-52 c-origin flex-y-baseline text-bold" v-if="parseFloat(activityDetail.price) > 0">
					<text class="font-24">¥</text>{{activityDetail.price}}
				</view>
				<view class="c-origin text-bold" v-else>
					免费
				</view>
				<text v-if="activityDetail.status == 1" class="font-28 c-89">已结束</text>
			</view>
			
			<view class="font-36 text-bold border-bottom p-b-24 m-b-24">{{activityDetail.goods_name}}</view>
			<view class="flex-between border-bottom p-b-24 m-b-24" v-if="!activityType">
				<view class="activity">
					<view class="flex-between m-b-20">
						<view class="rel">
							<text class="rel font-26 text-bold" style="z-index: 9;">活动时间</text>
							<text class="lines"></text>
						</view>
						<image :src="$util.img('image/child_1.png')" mode=""></image>
					</view>
					<view class="font-24 c-5e">{{activityDetail.date}} {{activityDetail.start_time}} - {{activityDetail.end_time}}</view>
				</view>
				<view class="activity">
					<view class="flex-between m-b-20">
						<view class="rel">
							<text class="rel font-26 text-bold" style="z-index: 9;">活动地址</text>
							<text class="lines"></text>
						</view>
						<image :src="$util.img('image/child_2.png')" mode=""></image>
					</view>
					<view class="font-24 c-5e ellipsis-2">{{activityDetail.address}}</view>
				</view>
			</view>
			<view class="mapinfo m-b-20">
			  <view style="width: 70%;">
			    <view>{{activityDetail.full_address}} </view>
			    <view class="font-24 c-8d">{{activityDetail.address}}</view>
			  </view>
			  <view class="flex-column flex-center" @click="goMap()">
			    <image :src="$util.img('image/child_3.png')" mode="" class="daoimg"></image>
			    <text class="font-24">导航</text>
			  </view>
			</view>
			<view class="mapBox">
			  <map style="width: 630rpx; height: 290rpx;" :latitude="Number(activityDetail.latitude)" :longitude="Number(activityDetail.longitude)" >
			  </map>
			</view>
		</view>
		<view class="goods-details" v-if="activityDetail.goods_content">
			<rich-text :nodes="activityDetail.goods_content" :data-nodes="activityDetail.goods_content"></rich-text>
		</view>
		<!-- 评论区域 -->
		<view class="comments-section">
			<view class="font-36 text-bold p-b-20 m-b-20 border-bottom">评论 ({{activityDetail.comment_num || 0}})</view>
			<comment :commentList="commentList"></comment>
		</view>
		
		<view class="footer fixfooter" :class="{ 'bottom-safe-area': isIphoneX }">
			<!-- <view class="submit" @click="makeApoint()" style="width: 690rpx;;">立即预约</view> -->
			<view class="submit" @click="makeApoint()">立即预约</view>
			<view class="footer-bar">
				<view class="bar-item" @click="handleLike" v-if="isZan == 0">
					<text class="iconfont">&#xe615;</text>
					<text class="count">{{activityDetail.zan_num || 0}}</text>
				</view>
				<view class="bar-item" @click="handleLike" v-else>
					<text class="iconfont color-title2">&#xe615;</text>
					<text class="count color-title2">{{activityDetail.zan_num || 0}}</text>
				</view>
				<view class="bar-item" @click="openComment">
					<text class="iconfont">&#xe614;</text>
					<text class="count">{{activityDetail.comment_num || 0}}</text>
				</view>
				<button class="bar-item" open-type="share">
					<text class="iconfont">&#xe616;</text>
					<text class="text">分享</text>
				</button>
			</view>
		</view>
		
		<!-- <sign :show="showSign" @close="closePop" :price="activityDetail.price" :memberPrice="goodsDetail.member_price" :backUrl="backUrl" :goodsid="id" v-if="showSign" :moduleType="moduleType" ref="signDetail"></sign> -->

		<!-- 登录 -->
		<login-pop ref="loginDialog"></login-pop>
		<!-- 评论弹出层 -->
    	<comment-pop :show="showComment" :articleId="activityDetail.goods_id" commentType="activity"  @close="closeComment" v-if="showComment"></comment-pop>
		
	</view>
</template>

<script>
	import comment from '../../components/comment/comment.vue';
	import commentPop from '../../components/commentPop/commentPop.vue';
	import htmlParser from '@/common/js/html-parser';
	import sign from '../../components/sign/sign.vue'
	export default {
		components: {
			sign,
			comment,
      		commentPop
		},
		data() {
			return {
				StatusBar: getApp().globalData.StatusBar,
				piclist: [],
				isIphoneX: false, //判断手机是否是iphoneX以上
				//地图
				latitude: 34.727066,
				longitude: 113.746751,
				showSign: false,
				id: '',
				activityDetail: {},
				activityType: '',   //活动类型  course儿童成长模块
				moduleType: 'social', //social代表文娱社交
				backUrl: '/otherpages/social/activityDetail',
				// 评论数据
				showComment: false,
				isZan: 0,
				commentList: [],   // 评论列表
				page: 1,

			}
		},
		onLoad(data) {
		  this.isIphoneX = this.$util.uniappIsIPhoneX()
			//   登录校验
		  if (!uni.getStorageSync('token')) this.$refs.loginDialog.open();
		  this.id = data.id;
		  if(data.activityType){
		   this.activityType = data.activityType;
		   if(this.activityType == 'course') this.moduleType = "";
		  }
		  
		  this.getDetail();

		  this.getCommentList();
			if(uni.getStorageSync('token')) {
				// 查询接口，获取文章是否点赞
				this.getLikeStatus();
			}
		},
		onShow() {
			// if(this.$refs.signDetail) this.$refs.signDetail.getDefaultAddress()
		},
		onReachBottom() {
			this.page += 1;
			this.getCommentList();
		},
		methods: {
			closeComment() {
				this.showComment = false;
				this.getDetail();
			},
			openComment() {
				this.showComment = true;
			},
			previewMedia(index) {
				var paths = [];
				for (let i = 0; i < this.piclist.length; i++) {
					paths.push(this.$util.img(this.piclist[i]));
				}
				uni.previewImage({
					current: index,
					urls: paths,
				});
			},
			makeApoint() {
				if(!uni.getStorageSync('token')) {
					this.$util.showToast({title: '请先登录'})
					return
				}
				// this.showSign = true
				let params = {
					price: this.activityDetail.price,
					memberPrice: this.activityDetail.member_price,
					goodsid: this.id,
					moduleType: this.moduleType
				}
				this.$util.redirectTo('/otherpages/serviceSign/serviceSign?params=' + JSON.stringify(params))

			},
			goBack() {
				// 判断路由是否有上一页，如果有则返回上一页，否则返回到首页
				if (getCurrentPages().length > 1) {
					uni.navigateBack()
				}else {
					this.$util.redirectTo('/pages/index/index')
				}
			},
			closePop() {
				this.showSign = false;
			},
			goMap() {
				// 在地图显示该位置导航
				uni.openLocation({
					latitude: Number(this.activityDetail.latitude),
					longitude: Number(this.activityDetail.longitude),
					name: this.activityDetail.goods_name,
					address: this.activityDetail.full_address + this.activityDetail.address
				})
			},
			getDetail() {
				this.$api.sendRequest({
			      url: "/api/socialize/goodsinfo",
			      data: {
			        goods_id: this.id,
			      },
			      success: res => {
			        if(res.code == 0) {
			         this.activityDetail = res.data;
					 // 如果商品图片存在且为多张的情况下，取第一张图片作为封面图，已逗号拆分字符串，第一张图片做为封面图
						if(this.activityDetail.goods_image) {
							var images = this.activityDetail.goods_image.split(',')
							this.piclist = images
						}
					 this.activityDetail.start_time = this.formatTime(res.data.start_time, 'HH:mm')
					 this.activityDetail.end_time = this.formatTime(res.data.end_time, 'HH:mm')
					 
					 // 商品详情
					 if (this.activityDetail.goods_content) this.activityDetail.goods_content = htmlParser(this.activityDetail.goods_content);

					 uni.setNavigationBarTitle({
						title: this.activityDetail.goods_name
					 })
			        }else {
						this.$util.showToast(res.message);
					}
			      }
			    })
			},
			formatTime(time) {
				//    time的格式是12:00:00
			   return time.substring(0, 5)
			},
			//获取文章的评论列表
				getCommentList() {
					this.$api.sendRequest({
					url: "/api/subscribegoodscomment/page",
					data: {
						goods_id: this.id,
						page: this.page,
					},
					success: res => {
						if(res.code == 0) {
						if(this.page == 1) this.commentList = [];
						this.commentList = [...this.commentList, ...res.data.list];

						// 数组双层循环，先循环评论，将评论中的图片字符串逗号分隔，转为数组，再循环回复，将回复中的图片字符串逗号分隔，转为数组
						this.commentList.forEach(item => {

							if (item.image) {
							// 先判断有没有逗号，如果有就分隔为数组
							if (item.image.indexOf(',') > -1) {
								item.image = item.image.split(',')
							}else {
								item.image = [item.image]
							}
							}

							if (item.child && item.child.length > 0) {
							item.child.forEach(reply => {
								if (reply.image) {
								// 先判断有没有逗号，如果有就分隔为数组
								if (reply.image.indexOf(',') > -1) {
									reply.image = reply.image.split(',')
								}else {
									reply.image = [reply.image]
								}
								}
							})
							}

						})

						this.$forceUpdate();
						
						}else {
						this.$util.showToast({title: res.message})
						}
					}
					})
				},
			getLikeStatus() {
				this.$api.sendRequest({
				url: "/api/subscribegoodszan/iszan",
				data: {
					goods_id: this.id
				},
				success: res => {
					if(res.code == 0) {
						this.isZan = res.data;  //1已点赞0未点赞
					}else {
						this.$util.showToast({title: res.message})
					}
				}
				})

			},
			handleLike() {
				if(this.isZan == 0) {
				// 未点赞，点击后变为已点赞
				this.$api.sendRequest({
					url: "/api/subscribegoodszan/add",
					data: {
						goods_id: this.id
					},
					success: res => {
					if(res.code == 0) {
						this.activityDetail.zan_num += 1;
						this.isZan = 1;
						
					}else {
						this.$util.showToast({
						title: res.message,
						icon: 'none'
						})
					}
					}
				})
				}else {
				// 已点赞，点击后变为未点赞
				this.$api.sendRequest({
					url: "/api/subscribegoodszan/delete",
					data: {
						goods_id: this.id
					},
					success: res => {
					if(res.code == 0) {
						this.activityDetail.zan_num -= 1;
						this.isZan = 0;
					}else {
						this.$util.showToast({
						title: res.message,
						icon: 'none'
						})
					}
					}
				})
				}
			},
		},
		//分享
		onShareAppMessage() {
			return {
				title: this.activityDetail.goods_name,
				path: `/otherpages/social/activityDetail?id=${this.id}`,
				imageUrl: ''
			}
		}
	}
</script>

<style lang="scss" scoped>
.container {
  padding-bottom: 160rpx;
}
.fixHeader {
  position:fixed;
  top:0;
  z-index: 9;
  width: 100%;
  box-sizing: border-box;
  .leftbtn {
    padding-left: 30rpx;
    // padding-top: 10rpx;
	margin-right: 30rpx;
	width: 60rpx;
	height: 60rpx;
  }
}
// 轮播图
.advertisement {
  position: relative;
  width: 750rpx;
  height: 750rpx;
  /deep/ swiper {
    height: 750rpx;
  }
  image {
    margin: 0 auto;
    width: 750rpx;
    height: 750rpx;
  }
}

.activity {
	width: 300rpx;
	height: 196rpx;
	border-radius: 20rpx;
	background: #F7F7F7;
	padding: 20rpx 24rpx;
	box-sizing: border-box;
	image {
		width: 30rpx;
		height: 30rpx;
	}
	.lines {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 112rpx;
		height: 18rpx;
		border-radius: 4rpx;
		background: #C6EFDD;
	}
}

.mapinfo {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #F7F7F7;
	border-radius: $border-radius;
	padding: 30rpx;

	.daoimg {
	  width: 54rpx;
	  height: 54rpx;
	}

}

.footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	.submit {
		width: 270rpx;
	}
}

.comments-section {
  margin: 30rpx;
}

.footer-bar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex: 1;
	margin-left: 20rpx;
    
    .bar-item {
      display: flex;
      align-items: center;
      
      .iconfont {
        font-size: 40rpx;
        color: #333;
        margin-right: 14rpx;
      }
      
      .count,
      .text {
        font-size: 32rpx;
        color: #172140;
      }
    }
}
button {
  margin: 0;
  background: none;
  font-size: 32rpx;
  padding: 0;
}
</style>
